{% extends 'base_children.html' %}
{% load mytags %}
{% block self_head %}
    {##这里是 个性化的头部脚本呢#}
    <link rel="stylesheet" type="text/css" href="/static/larryms/css/admin/nav.css">
{% endblock %}

{% block content %}
    {#    #这里是真正的内容部分#}

<div class="layui-row">
<div class="layui-col-lg9">

<div class="layui-card">
        <div class=" layui-card-body larryms-shortcut">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px;">
  <legend>主库</legend>
</fieldset>
            <ul class="layui-row layui-col-space14" id="shortcut">
                {% for data in zhuku %}

                    <li class="layui-col-xs2" >

                        <button class="layui-btn layui-btn-lg layui-btn-primary" data-type="showsql"  data-url='{% url 'mysql_fast_sql_show'  %}' data-sqlid={{ data.id|int2str }}>
{#                            <i class="larry-icon fa-map-pin">{{ data.name }}</i>#}
                            {{ data.name }}
                            <cite>{{ data.desc }}</cite>
                        </button>
                    </li>
                {% endfor %}
            </ul>


     <fieldset class="layui-elem-field layui-field-title" style="margin-top: 25px;">
  <legend>集群</legend>
</fieldset>

            <ul class="layui-row layui-col-space10" >
                {% for data in jiqun %}
                    <li class="layui-col-xs2">
                         <button class="layui-btn layui-btn-lg layui-btn-green" data-type="showsql"  data-url='{% url 'mysql_fast_sql_show'   %}' data-sqlid={{ data.id }}>
{#                            <i class="larry-icon fa-map-pin">{{ data.name }}</i>#}
                            {{ data.name }}
                            <cite>{{ data.desc }}</cite>
                        </button>
                    </li>
                {% endfor %}
            </ul>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 25px;">
  <legend>从库</legend>
</fieldset>
            <ul class="layui-row layui-col-space10" >

                {% for data in congku %}

                    <li class="layui-col-xs2">
                            <button class="layui-btn layui-btn-lg layui-btn-green" data-type="showsql"  data-url='{% url 'mysql_fast_sql_show'  %}' data-sqlid='{{ data.id }}'>
{#                            <i class="larry-icon fa-map-pin">{{ data.name }}</i>#}
                            {{ data.name }}
                            <cite>{{ data.desc }}</cite>
                        </button>
                    </li>
                {% endfor %}
            </ul>

            <hr class="layui-bg-cyan">

            <ul class="layui-row layui-col-space10" id="shortcut">

                {% for data in qita %}

                    <li class="layui-col-xs2">
                        <a larry-tab="iframe" data-url='{% url 'mysql_fast_sql_show'  %}' data-sqlid={{ data.id }}
                           data-group="1" data-icon="larry-shengyin" data-font="larry-icon">
                            <i class="larry-icon ">{{ data.name }}</i>
                            <cite>{{ data.desc }}</cite>
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>
</div>

</div>

<div class="layui-col-lg3">
  <form action="{% url 'mysql_fast_sql_result'  %}" class="layui-form layui-form-pane" method="post"
                  id="demoAddForm">
                {% csrf_token %}
  <input class="layui-input" id=sqlid name="id" hidden>
                <div class="layui-form-item layui-form-text">

                    <label class="layui-form-label">SQL</label>
                    <div class="layui-input-block">
                         <textarea id=sql class="layui-textarea" name="sql"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">搜索数据库集群</label>
                            <div class="layui-input-inline">
                                <select name="mysqlcluster_id" lay-verify="required" lay-search="'">
                                    <option value=''>直接选择或搜索选择</option>
                                    {% for s in mysqlcluster %}
                                        <option value='{{ s.id }}'> ( {{ s.foreign_ip }}/{{ s.foreign_port }})
                                            + {{ s.name }}  </option>{% endfor %}
                                </select>
                            </div>
                        </div>

                    <div class="layui-col-lg2">
                        <div class="layui-form-inline">
                            <a class='layui-btn  layui-btn-normal' lay-submit='' lay-filter='demoadd'
                               id='submitAdd'>确定</a>
                        </div>
                    </div>
                </div>
            </form>
</div>
</div>




{% endblock %}

{% block self_foot %}
    {#    #这里是个性化的底足脚本#}



    <script type="text/javascript">
        layui.cache.rightMenu = 'false';
        {#layui.cache.page = 'console';#}
        layui.config({
            version: "2.0.8",
            base: '/static/larryms/',

            rightmenu: 'fasle'
        }).extend({
            larry: 'js/base'
        }).use(['larry', 'layer', 'form','jquery'], function () {
            var $ = layui.$,
                larryms = layui.larryms,
                util = layui.util,
                form=layui.form;


        //按钮监听
  $(' .layui-btn').on('click', function() {
      var type = $(this).data('type'),
        url = $(this).data('url'),
        tit = $(this).children('cite').text(),
        sqlid=$(this).data('sqlid');
      active[type] ? active[type].call(this, url, tit,sqlid) : '';
  });
  var active = {

      showsql: function (url) {

         var sqlid= $(this).data('sqlid');
         console.log(sqlid)
           $.ajax({
			    {#dataType: "JSON",#}
			    url:url, //请求地址
			    type:"POST",  //提交类似
			    {#contentType: "application/json",#}
			    data: {"sqlid":sqlid },  //提交参数
			    success:function(res) {
                    larryms.msg(res.msg)
                   document.getElementById('sql').value=res.sql;
                    document.getElementById('sqlid').value=res.sqlid;

                }
      })}
      {#exec: function(url, tit) {#}
      {#  var that = this;#}
      {#  if ($(that).attr('data-flag') == 'exist') {#}
      {#    var index = layui.cache.layerIndex,#}
      {#        $max = $max = $('#layui-layer' + index).find('.layui-layer-maxmin');#}
      {#    $max.click();#}
      {#    layui.cache.layerIndex = null;#}
      {#  } else {#}
      {#    $(that).attr('data-flag', 'exist');#}
      {#    var index = layer.open({#}
      {#      title: tit,#}
      {#      type: 2,#}
      {#      area: ['1290px', '600px'],#}
      {#      content: url,#}
      {#      success: function(index, layero) {#}
      {#        form.render();#}
      {#      },#}
      {#      end: function() {#}
      {#        $(that).removeAttr("data-flag");#}
      {#        layui.cache.layerIndex = null;#}
      {#      }#}
      {#    });#}
      {##}
      {#  }#}
      {# }#}

    };

        form.on('submit(demoadd)', function (data) {
            var temurl=data.form.action,
                id=data.field.id,
                sql=data.field.sql,
                mysqlcluster_id=data.field.mysqlcluster_id;
            var  url= temurl+'?id='+id+'&sql='+sql+'&mysqlcluster_id='+mysqlcluster_id;
            var editIndex =  larryms.open({
              title: sql,
              type: 2,
              area: ['1260px', '600px'],
              content: url,
              success: function(index, layero) {
                form.render();
              }
          });
                {#$.post(data.form.action, data.field, function (res) {#}
                {#    if (res.code == 200) {#}
                {#        larryms.msg(res.msg)#}
                {#    } else if (res.code == 500) {#}
                {#        larryms.msg(res.msg);#}
                {#    }#}
                {# });#}
                return false;
            });
        });


    </script>
{% endblock %}